<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
   /* box-sizing: border-box的优势(https://www.python100.com/html/57209.html) */
 *, *::before, *::after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
        width: 100vw;
        height: 100vh;
        background: #2c3e50;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
      width: 200px;
      height: 200px;
      background-color: #000;
      position: relative;
      border-radius: 50%;
    }
    ul{
      width: 300px;
      height: 300px;
      /* border: 1px solid red; */
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
      transform: scale(0);
      transition: all 1s;
      opacity: 0;
    }
    ul li{
      list-style: none;
      width: 80px;
      height: 80px;
      background: #e74c3c;
      border-radius: 50%;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      color:white;
      transform-origin: 150px 150px;
      transition: all 1s;
    }
    nav:hover ul{
      transform:scale(1);
      opacity: 1;
    }
    nav:hover li:nth-of-type(1){
       transform: rotate(40deg);
    }
    nav:hover li:nth-of-type(1) span{
       transform: rotate(320deg);
    }
    nav:hover li:nth-of-type(2){
       transform: rotate(80deg);
    }
    nav:hover li:nth-of-type(2) span{
       transform: rotate(640deg);
    }
    nav:hover li:nth-of-type(3){
       transform: rotate(120deg);
    }
    nav:hover li:nth-of-type(3) span{
       transform: rotate(960deg);
    }
    nav:hover li:nth-of-type(4){
       transform: rotate(160deg);
    }
    nav:hover li:nth-of-type(4) span{
       transform: rotate(1280deg);
    }
    nav:hover li:nth-of-type(5){
       transform: rotate(200deg);
    }
    nav:hover li:nth-of-type(5) span{
       transform: rotate(1600deg);
    }
    nav:hover li:nth-of-type(6){
       transform: rotate(240deg);
    }
    nav:hover li:nth-of-type(6) span{
       transform: rotate(1920deg);
    }
    nav:hover li:nth-of-type(7){
       transform: rotate(280deg);
    }
    nav:hover li:nth-of-type(7) span{
       transform: rotate(2240deg);
    }
    nav:hover li:nth-of-type(8){
       transform: rotate(320deg);
    }
    nav:hover li:nth-of-type(8) span{
       transform: rotate(2560deg);
    }
    nav:hover li:nth-of-type(9){
       transform: rotate(360deg);
    }
    nav:hover li:nth-of-type(9) span{
       transform: rotate(2880deg);
    }
</style>
<body>
  <nav>
    <ul>
      <li><span>1</span></li>
      <li><span>2</span></li>
      <li><span>3</span></li>
      <li><span>4</span></li>
      <li><span>5</span></li>
      <li><span>6</span></li>
      <li><span>7</span></li>
      <li><span>8</span></li>
      <li><span>9</span></li>
    </ul>
  </nav>
</body>
<script>
    
    
</script>
</html>
